﻿<xsl:stylesheet  version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output indent="yes" />

  <xsl:param name="pNumCols" select="4"/>


  <xsl:template match="Menu">
   
    <xsl:for-each select="MenuArea">
     
      <xsl:apply-templates select="MenuArea" />
    
    </xsl:for-each>
    
  </xsl:template>

  <xsl:template match="MenuArea">
    
      <li>
        <div class="areaHeaderTitle">
          <xsl:value-of select="@Title" />
        </div>
   
        <xsl:apply-templates select="MenuAreaItem[position() mod $pNumCols = 1]"/>


      </li>
  
   
  </xsl:template>

  <xsl:template match="MenuAreaItem">
    <div class="navButtonContainer" style="">
      
      <xsl:for-each select=".|following-sibling::MenuAreaItem[not(position() > $pNumCols -1)]" >


      <div  class="navButtonArea" style="">
        <xsl:attribute name="Id">
          <xsl:value-of select="@Id" />
        </xsl:attribute>
        
        <a href="javascript:;" onclick="javascript:DXTools.QuickView.Menu.LoadUrl(this);" unselectable="on" class="navButtonLink">
          <xsl:attribute name="Url">
            <xsl:value-of select="@Url" />
          </xsl:attribute>
          <xsl:attribute name="Id">
            <xsl:value-of select="@ItemId" />
          </xsl:attribute>

          <div class="navButtonContent" style="">
            <div class="navButtonContentImage">
              <img class="alignedImage">
                <xsl:attribute name="src">
                  <xsl:value-of select="@ImageUrl" />
                </xsl:attribute>
              </img>

            </div>
            <div class="navButtonContentText">
              <span class="navButtonContentTextLabel">
                <xsl:value-of select="@Title" />
              </span>
            </div>

          </div>
        </a>
      </div>

      </xsl:for-each>

    </div>

  </xsl:template>

</xsl:stylesheet>
